<template>
	<view class="">
		<cu-custom :isBack="true">
			<block #content>添加设备</block>
		</cu-custom>
		
		<view style="position:fixed;top:180rpx;z-index:10000;width:100vw;" class="bg-white">
			<view class="padding-lr-xl padding-top padding-bottom-xs">
				<view class="flex justify-start align-center text-df text-black text-bold">
					<view class="">选择设备</view>
					<view class="margin-left-sm">
						({{deviceList.length}}个可选)
					</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-y="true" class="scrollPage"
			style="position:fixed;top:260rpx;z-index:10001;width:100vw;height:75vh;">
			<view v-for="(item,index) in deviceList" :key="index" class="common-shadow margin-top-sm margin-bottom-lg margin-lr-xl padding flex justify-between align-center
					" style="border-radius:15rpx;" :class="item.isSelect ? 'bg-gray' : 'bg-write'" @tap="chooseDevice(item)">
				<view class="flex justify-start align-center">
					<img style="width:80rpx;height:auto" src="../../assets/images/device.png" alt="" mode="widthFix">
					<view class="padding-left">
						<view class="text-df text-black text-bold text-title">{{item.deviceName}}</view>
						<view class="text-xs text-gray-color margin-top-xs">{{item.code}}</view>
						<view class="text-xs text-gray-color address-input">{{item.address}}</view>
					</view>
				</view>
				<view class="text-center">
					<view class="flex justify-start align-center">
						<signal id="signal" :netSignal="item.signal" :inline="item.inline"></signal>
						<surplus id="surplus" :battery="item.battery" :inline="item.inline"
							class="surplus margin-left-sm"></surplus>
					</view>
					<view class="text-center margin-top-xs">
						<img v-if="item.inline === 1" style="width:50rpx;height:50rpx;"
							src="../../assets/images/onLineLamp.png" alt="" mode="widthFix">
						<img v-else style="width:50rpx;height:50rpx;"
							src="../../assets/images/offLamp.png" alt="" mode="widthFix">
					</view>
				</view>
			</view>
			<view style="padding-bottom:150rpx;"></view>
		</scroll-view>
		<view  style="position:fixed;bottom:0;z-index:10002;">
			<view class="flex justify-between align-center padding-xl bg-white" style="width:100vw;">
				<button class="cu-btn lg bg-red-color text-white" style="width:45vw;border-radius:8rpx;font-size:28rpx;"
					@tap="backPage">返回</button>
				<button class="cu-btn lg bg-blue-color text-white margin-left"
					style="width:45vw;border-radius:8rpx;font-size: 28rpx;" @tap="comfirm">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import * as ztIotApi from '@/api/dmIot/ztIotApi.ts'
	import Surplus from '@/components/ztn-custom/Surplus2'
	import Signal from '@/components/ztn-custom/Signal'
	export default {
		name: 'addDevice',
		components: {
			Surplus,
			Signal
		},
		onLoad(option) {
			this.projectId = option.id
			this.getUnBindingProjectList()
		},
		data() {
			return {
				isLogin: false,
				deviceList: [],
			}
		},
		methods: {
			getUnBindingProjectList() {
				let currentPage = this.currentPage
				let pageSize = this.pageSize
				let params = {
					pageNum: currentPage,
					pageSize,
				}
				ztIotApi.getUnBindingProjectList(params).then((res) => {
					const {
						code,
						data,
						success
					} = res
					if (success) {
						let deviceList = []
						for (let i = 0; i < data.length; i++) {
							let item = data[i]
							deviceList.push({
								...item,
								isSelect: false
							})
						}
						this.deviceList = deviceList
					}
				})
			},
			chooseDevice(option) {
				let id = option.id
				this.deviceList.map((item) => {
					if (id === item.id) {
						item.isSelect = !item.isSelect
					}
					return item
				})
			},
			comfirm() {
				let idLists = []
				let deviceList = this.deviceList
				for (var i = 0; i < deviceList.length; i++) {
					let {id,isSelect} = deviceList[i]
					if (isSelect) idLists.push(id)
				}
				let projectId = this.projectId
				let params = {
					id: projectId,
					deviceIdList:idLists
				}
				ztIotApi.bindingDevices(params).then((res) => {
					const {
						msg,
						data,
						success
					} = res
					if (success) {
						uni.$emit("refreshAddDevice")
						this.backPage()
					}
				})
			},
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style scoped>
	.text-gray-color {
		color: #cdcdcd;
	}

	.bg-red-color {
		background-color: #f33423;
	}

	.bg-blue-color {
		background-color: #3d5dd2;
	}

	.common-shadow {
		box-shadow: 0upx 0upx 10upx 4upx rgba(0, 0, 0, 0.1);
		border-radius: 8px;
	}
</style>
